<template>
  <div class="banner" :style="backgroundStyle">
    <h1>{{ title }}</h1>
    <p>{{ desc }}</p>
  </div>
</template>

<script>
export default {
  /**
   * title 标题
   * desc 信息
   * bgImg 背景图
   * bgSize 大小
   */
  props: ["title", "desc", "bgImg", "bgSize"],
  data() {
    return {
      backgroundStyle: {
        backgroundImage: "url(" + require(`@/assets/svg/${this.bgImg}`) + ")",
        backgroundSize: this.bgSize + "px"
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.banner {
  height: 260px;
  background: white no-repeat;
  background-position: bottom right;
  padding: 60px 80px;
  border-radius: 10px;
  border: 1px solid $border-color;

  h1 {
    color: black;
    font-weight: 400;
    font-size: 24px;
  }

  p {
    margin-top: 20px;
    color: $text-level-2;
  }
}

@media screen and (max-width: 576px) {
  .banner {
    display: none;
  }
}
</style>
